<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        Drag-n-drop external events - Demos | FullCalendar
    </title>
    <link href="https://unpkg.com/@fullcalendar/core@4.4.0/main.min.css" rel="stylesheet">
    <link href="https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.css" rel="stylesheet">
    <link href="https://unpkg.com/@fullcalendar/timegrid@4.4.0/main.min.css" rel="stylesheet">
    <script src="https://unpkg.com/@fullcalendar/core@4.4.0/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/core@4.4.0/locales-all.js"></script>    
    <script src="https://unpkg.com/@fullcalendar/interaction@4.4.0/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/daygrid@4.4.0/main.min.js"></script>
    <script src="https://unpkg.com/@fullcalendar/timegrid@4.4.0/main.min.js"></script>
    <style>
        html, body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
  }

  #external-events {
    position: fixed;
    z-index: 2;
    top: 20px;
    left: 20px;
    width: 150px;
    padding: 0 10px;
    border: 1px solid #ccc;
    background: #eee;
  }

  .demo-topbar + #external-events { /* will get stripped out */
    top: 60px;
  }

  #external-events .fc-event {
    margin: 1em 0;
    cursor: move;
  }

  #calendar-container {
    position: relative;
    z-index: 1;
    margin-left: 200px;
  }

  #calendar {
    max-width: 900px;
    margin: 20px auto;
  }

</style>
</head>

<body>
    <div id="external-events">
        <p>
            <strong>Draggable Events</strong>
        </p>
        <div class="fc-event">My Event 1</div>
        <div class="fc-event">My Event 2</div>
        <div class="fc-event">My Event 3</div>
        <div class="fc-event">My Event 4</div>
        <div class="fc-event">My Event 5</div>
        <p>
            <input type="checkbox" id="drop-remove">
            <label for="drop-remove">remove after drop</label>
        </p>
    </div>
    <div id="calendar-container">
        <div id="calendar"></div>
    </div>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var Calendar = FullCalendar.Calendar;
        var Draggable = FullCalendarInteraction.Draggable;

        var containerEl = document.getElementById('external-events');
        var calendarEl = document.getElementById('calendar');
        var checkbox = document.getElementById('drop-remove');

        // initialize the external events
        // -----------------------------------------------------------------

        new Draggable(containerEl, {
            itemSelector: '.fc-event',
            eventData: function(eventEl) {
                return {
                    title: eventEl.innerText
                };
            }
        });

        // initialize the calendar
        // -----------------------------------------------------------------

        var calendar = new Calendar(calendarEl, {
            plugins: ['interaction', 'dayGrid', 'timeGrid'],
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'dayGridMonth,timeGridWeek,timeGridDay'
            },
            locale: 'zh-cn',
            editable: true,
            droppable: true, // this allows things to be dropped onto the calendar
            selectable: true,
            drop: function(info) {
                // is the "remove after drop" checkbox checked?
                if (checkbox.checked) {
                    // if so, remove the element from the "Draggable Events" list
                    info.draggedEl.parentNode.removeChild(info.draggedEl);
                }
            },
            eventDrop:function(info){
                console.log('当拖动停止并且事件已移动到其他日期/时间时触发')
            },
            eventReceive:function(info){
                console.log('当将具有相关事件数据的外部可拖动元素放到日历上时调用。或另一个日历中的事件')
            },
            select:function(info){
                console.log('select')
            },
            dateClick:function(info){
                console.log('当用户单击日期或时间时触发。')
            },
            eventClick(calEvent, jsEvent, view) {
                alert("点击日程触发");
                console.log(calEvent);
            },            
        });

        calendar.render();
    });
    </script>
</body>

</html>